<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <span>我是ul中标的span标签</span>
        <i>子一级</i>
        <li>
            <i>子两级</i>
            6</li>
        <li>7
            <p>
                <i>子三级</i>
            </p>
        </li>
        <li>8</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        // 筛选器
        // first()
        console.log($('li').first())
        // 2、last()
        console.log($('li').last())
        // eq()
        // 注意：索引从0开始，依次+1
        console.log($('li').eq(3))
        // 4、next
        console.log($('span').next())
        // 5、nextAll()
        console.log($('span').nextAll())
        // 6、prev()
        console.log($('span').prev())
        // 7、prevAll()
        console.log($('span').prevAll())
        // 8、parent()
        console.log($('span').parent())
        // 9、parents()
        // 注意：获取到的是该元素所有的父级解构，逐层获取，直到html标签为止
        console.log($('span').parents())
        // 10、siglings()

        // 注意： 拿到该元素的所有兄弟元素
        console.log($('span').siblings())
        // 11、find()
        // 注意： 找到钙元素的所有后代元素中，满足选择器要求的元素
        console.log($('ul').find('i'))
    </script>
</body>
</html>